<template>
  <el-dialog title='指定路由' :visible.sync='isShow' :close-on-click-modal="false">
    <div class="role-transfer">
      <el-transfer v-model="innerselectdRotes"
                   :titles="['未选路由', '已选路由']"
                   :props="{ key: 'path', label: 'name'}"
                   :data="allRoutes"></el-transfer>
    </div>
    <div slot='footer' class='dialog-footer'>
      <el-button type='primary' @click='handleSubmit'>确定</el-button>
      <el-button @click='isShow = false'>取消</el-button>
    </div>
  </el-dialog>

</template>

<script>
  export default {
    name: "routesSetDialog",
    created() {
      this.innerselectdRotes = this.selectdRotes;
    },
    data() {
      return {
        allRoutes: [],
        isShow: false,
        innerselectdRotes: []
      };
    },
    props: {
      selectdRotes: {
        type: Array,
        default() {
          return [];
        }
      },
      dialogtype: {
        type: String,
        default: "compnayset"
      }
    },
    methods: {
      showDialog(companykey = "") {
        this.innerselectdRotes = this.selectdRotes;
        if (this.dialogtype === "compnayset") {
          this.$http.get('/OssBack/Auth/GetModuleRoute', {
            params: {
              zlcompnaykey: companykey
            }
          }).then((response) => {
            if (response.data.isSuccess) {
              this.allRoutes = response.data.routes;
              this.isShow = true;
            }
          });
        } else {
          this.$http.get('/OssBack/Auth/GetAllRoute').then((response) => {
            if (response.data.isSuccess) {
              this.allRoutes = response.data.routes;
              this.isShow = true;
            }
          });
        }
      },
      /**
       * 提交表单
       */
      handleSubmit() {
        this.isShow = false;
        this.$emit("onSubmit", this.innerselectdRotes);
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .role-transfer {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
</style>

